// 申请入驻
import ArrowLeftOutlined from '@/assets/arrow_left.svg';
import ArrowRightOutlined from '@/assets/arrow_right.svg';
import company from '@/assets/contact_company.png';
import step from '@/assets/contact_line.svg';
import bg from '@/assets/join_b.svg';
import { findByCodeList } from '@/services/login';
import { getOptions } from '@/utils';
import { serviceList } from '@/utils/common';
import { useRequest } from 'ahooks';
import {
  Button,
  Card,
  Carousel,
  Col,
  Divider,
  Flex,
  Form,
  Input,
  InputNumber,
  Row,
  Select,
  Space,
  message,
} from 'antd';
import CountUp from 'react-countup';
import { Helmet, useIntl } from 'umi';
const Join: React.FC = () => {
  const intl = useIntl();
  const isEn = intl.locale == 'en-US';

  const list = [
    { title: 'center.join_bank', word: 'center.join_bank_word' },
    { title: 'center.join_bank1', word: 'center.join_bank_word' },
  ];
  const xList = [
    { title: 'center.join_user', word: 'center.join_user_word' },
    { title: 'center.join_risk', word: 'center.join_risk_word' },
    { title: 'center.join_amount', word: 'center.join_amount_word' },
    { title: 'center.join_manage', word: 'center.join_manage_word' },
  ];

  const operateList = [
    { title: 'center.join_submit', word: 'center.join_submit_word' },
    { title: 'center.join_get_contact', word: 'center.join_get_contact_word' },
    { title: 'center.join_ok', word: 'center.join_ok_word' },
  ];
  const { data } = useRequest(() => {
    return findByCodeList({ code: 'applyType' });
  });

  const { applyType: applyTypeList } = data?.data || {};
  return (
    <>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.meta_title' })}</title>
      </Helmet>
      <div className="join">
        <div className="join_top">
          <img src={bg} className="join_top_bg" />
          <div className="common">
            <Flex gap={104}>
              <div style={{ width: 480 }}>
                <div
                  style={{ margin: '48px 0 20px', fontSize: 30, fontWeight: 'bold', color: '#000' }}
                >
                  {intl.formatMessage({ id: 'center.join_title' })}
                </div>
                <div style={{ fontSize: 16, color: '#333' }}>
                  {intl.formatMessage({ id: 'center.join_title_word' })}
                </div>
                <div style={{ marginBottom: 50 }}>
                  <Divider />
                </div>
                <Carousel
                  prevArrow={<img src={ArrowRightOutlined} />}
                  nextArrow={<img src={ArrowLeftOutlined} />}
                  infinite
                  arrows
                  autoplay
                  dots={false}
                >
                  {list.map((item, index) => {
                    const { title, word } = item;
                    return (
                      <div key={title} style={{ width: '100%', height: 264 }}>
                        <Flex align="center" justify="space-between">
                          <div>
                            <img height={36} src={require(`@/assets/join_bank${index + 1}.png`)} />
                          </div>
                          <Flex gap={5} align="center">
                            <div style={{ fontSize: 20, fontWeight: 'bold', color: '#333' }}>
                              {intl.formatMessage({ id: title })}
                            </div>
                            <div style={{ color: '#666' }}>
                              {intl.formatMessage({ id: 'center.join_bank_position' })}
                            </div>
                          </Flex>
                        </Flex>
                        <div
                          style={{
                            margin: '40px 0 0 0 ',
                            fontSize: 16,
                            color: '#333',
                            lineHeight: '26px',
                          }}
                        >
                          {intl.formatMessage({ id: word })}
                        </div>
                      </div>
                    );
                  })}
                </Carousel>
              </div>
              <div style={{ flex: 1 }}>
                <Card>
                  <div
                    style={{
                      fontSize: 30,
                      textAlign: 'center',
                      fontWeight: 'bold',
                      margin: '10px 0 30px 0',
                    }}
                  >
                    {intl.formatMessage({ id: 'center.join_apply' })}
                  </div>
                  <Form
                    className="join_form"
                    layout="vertical"
                    onFinish={() => {
                      message.success(intl.formatMessage({ id: 'center.contact_send_suc' }));
                    }}
                  >
                    <Row gutter={[20, 0]}>
                      <Col span={24}>
                        <Form.Item
                          label={intl.formatMessage({ id: 'center.join_name' })}
                          rules={[{ required: true }]}
                          name="name"
                        >
                          <Input
                            placeholder={intl.formatMessage({ id: 'center.join_name' })}
                            style={{
                              borderRadius: 6,
                              height: '41px',
                              lineHeight: '41px',
                              width: '100%',
                            }}
                          />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item
                          label={intl.formatMessage({ id: 'center.join_type' })}
                          rules={[{ required: true }]}
                          name="type"
                        >
                          <Select
                            placeholder={intl.formatMessage({ id: 'center.join_type' })}
                            options={getOptions(applyTypeList)}
                            style={{
                              background: '#fff',
                              borderRadius: 6,
                              height: '41px',
                              lineHeight: '41px',
                              width: '100%',
                            }}
                          />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item
                          label={intl.formatMessage({ id: 'center.join_contact' })}
                          rules={[{ required: true }]}
                          name="contact"
                        >
                          <Input
                            placeholder={intl.formatMessage({ id: 'center.join_contact' })}
                            style={{
                              background: '#fff',
                              borderRadius: 6,
                              height: '41px',
                              lineHeight: '41px',
                              width: '100%',
                            }}
                          />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item
                          label={intl.formatMessage({ id: 'center.contact_phone' })}
                          rules={[{ required: true }]}
                          name="phone"
                        >
                          <InputNumber
                            placeholder={intl.formatMessage({ id: 'center.contact_phone' })}
                            controls={false}
                            style={{
                              background: '#fff',
                              borderRadius: 6,
                              height: '41px',
                              lineHeight: '41px',
                              width: '100%',
                            }}
                          />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item
                          label={intl.formatMessage({ id: 'center.contact_email' })}
                          rules={[{ required: true }]}
                          name="email"
                        >
                          <Input
                            placeholder={intl.formatMessage({ id: 'center.contact_email' })}
                            style={{
                              background: '#fff',
                              borderRadius: 6,
                              height: '41px',
                              lineHeight: '41px',
                              width: '100%',
                            }}
                          />
                        </Form.Item>
                      </Col>
                    </Row>

                    <Form.Item>
                      <Button
                        htmlType="submit"
                        style={{
                          height: '60px',
                          width: '100%',
                          display: 'flex',
                          border: 'none',
                          alignItems: 'center',
                          justifyContent: 'center',
                          background: '#011C64',
                        }}
                      >
                        <Space style={{ fontSize: 16, color: '#fff' }}>
                          <div>{intl.formatMessage({ id: 'center.join_send' })}</div>
                        </Space>
                      </Button>
                    </Form.Item>
                  </Form>
                </Card>
              </div>
            </Flex>
          </div>
        </div>
        <div className="join_operate common">
          <div style={{ fontSize: 30, fontWeight: 'bold', color: '#333', marginBottom: 40 }}>
            {intl.formatMessage({ id: 'home.cooperation_company' })}
          </div>
          <img src={company} style={{ width: '100%' }} />
        </div>
        <div className="join_service">
          <div className="common">
            <div style={{ fontSize: 30, fontWeight: 'bold', color: '#333', marginBottom: 40 }}>
              {intl.formatMessage({ id: 'center.join_xlend' })}
            </div>
            <Flex gap={13}>
              {xList.map((item, index) => {
                const { word, title } = item;
                return (
                  <Card
                    style={{
                      border: '1px solid #eee',
                      textAlign: 'left',
                      borderRadius: 6,
                      flex: 1,
                    }}
                    key={title}
                  >
                    <img width={30} src={require(`@/assets/contact_s${index + 1}.svg`)} />
                    <div
                      style={{
                        margin: '30px 0 10px 0',
                        fontSize: isEn ? 16 : 20,
                        fontWeight: 'bold',
                      }}
                    >
                      {intl.formatMessage({ id: title })}
                    </div>
                    <div
                      style={{
                        fontSize: isEn ? 14 : 16,
                        lineHeight: isEn ? '20px' : '26px',
                        color: '#666',
                      }}
                    >
                      {intl.formatMessage({ id: word })}
                    </div>
                  </Card>
                );
              })}
            </Flex>

            <Flex justify="space-around" style={{ marginTop: 50 }}>
              {serviceList.map((item) => {
                const { title, word, value } = item;
                return (
                  <div key={title}>
                    <Flex gap={24}>
                      <div style={{ textAlign: 'left' }}>
                        <Space size={12} style={{ marginBottom: 5 }}>
                          <div style={{ fontSize: 54, fontWeight: 'bold', color: '#FF8F00' }}>
                            <CountUp separator="" end={value} />
                          </div>
                          {word}
                        </Space>
                        <div style={{ marginBottom: 10, fontSize: 16, color: '#666' }}>
                          {intl.formatMessage({ id: title })}
                        </div>
                      </div>
                    </Flex>
                  </div>
                );
              })}
            </Flex>
            <div
              style={{
                padding: '40px 0',
                fontSize: 30,
                fontWeight: 'bold',
                color: '#333',
                border: '1px',
              }}
            >
              {intl.formatMessage({ id: 'center.join_step' })}
            </div>
            <Row style={{ paddingBottom: 180 }} gutter={[25, 0]}>
              {operateList.map((item, index) => {
                const { word, title } = item;
                return (
                  <Col span={8} key={title} style={{ display: 'flex' }}>
                    <div
                      style={{
                        textAlign: 'center',
                        position: 'relative',
                        padding: '30px 0',
                        border: '1px solid #E9E8F0',
                        borderRadius: 6,
                        width: '100%',
                        height: '100%',
                      }}
                    >
                      <img width={70} src={require(`@/assets/contact_o${index + 1}.svg`)} />
                      <div
                        style={{
                          fontSize: 18,
                          fontWeight: 'bold',
                          color: '#333',
                          margin: '10px 0',
                        }}
                      >
                        {intl.formatMessage({ id: title })}
                      </div>
                      <div style={{ fontSize: 16, color: '#666' }}>
                        {intl.formatMessage({ id: word })}
                      </div>

                      {index == operateList.length - 1 ? null : (
                        <img className="join_operate_img" width={102} src={step} />
                      )}
                    </div>
                  </Col>
                );
              })}
            </Row>
          </div>
        </div>
      </div>
    </>
  );
};

export default Join;
